/*
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2023-12-26 14:30:20
 * @LastEditors: your name
 * @LastEditTime: 2023-12-26 14:30:23
 */
import * as echarts from "echarts";

const getCommunityOpts = (dataSource) => {
  const option = {
    backgroundColor: "rgba(0,0,0,0)",
    grid: {
      top: "4%",
      left: "4%",
      bottom: "0%",
      right: "5%",
      containLabel: true,
    },
    barWidth: 8,
    xAxis: {
      show: false,
      type: "value",
      splitLine: {
        show: false,
        lineStyle: {
          color: "#444142",
          type: "dashed",
        },
      },
      axisTick: {
        show: true,
      },
      axisLine: {
        //  改变x轴颜色
        show: true,
        lineStyle: {
          color: "#EEEDEF",
        },
      },

      axisLabel: {
        //  改变x轴字体颜色和大小
        show: true,
        textStyle: {
          color: "#A4A3A4",
          fontSize: 12,
        },
      },
    },
    yAxis: {
      type: "category",
      data: dataSource.map((item) => item.name),
      splitLine: {
        show: false,
        lineStyle: {
          color: "rgba(255,255,255,0.2)",
          fontSize: 14,
          type: "dashed",
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        //  改变y轴颜色
        show: false,
      },
      axisLabel: {
        //  改变y轴字体颜色和大小
        //formatter: '{value} m³ ', //  给y轴添加单位
        textStyle: {
          color: "#fff",
          fontSize: 10,
        },
      },
    },
    series: [
      {
        type: "bar",
        name: "",
        barWidth: 8,
        itemStyle: {
          normal: {
            label: {
              show: true, //开启显示
              position: "right", //在上方显示
              textStyle: {
                //数值样式
                color: "#fff",
                fontSize: 10,
              },
              color: "#fff",
              fontSize: 10,
            },
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "#5af0d2",
              },
              {
                offset: 1,
                color: "#1b72f2",
              },
            ]),
            // barBorderRadius:15
          },
        },
        data: dataSource.map((item) => item.value),
      },
    ],
  };
  return option;
};

const getPeopleChartOpts = (dataSource) => {
  const option = {
    backgroundColor: "rgba(0,0,0,0)",
    grid: {
      left: "5%",
      right: "10%",
      top: "10%",
      bottom: "0%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: "rgba(50, 216, 205, 1)",
        },
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: 1,
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "#A1A7B3",
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },

        data: dataSource.map((item) => item.name),
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "",
        padding: 5,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#A1A7B3",
            type: "dashed",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          margin: 10,
          textStyle: {
            color: "#A1A7B3",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "今日",
        type: "line",
        smooth: true,
        stack: "总量",
        symbolSize: 5,
        showSymbol: false,
        itemStyle: {
          normal: {
            color: "#23D0C4",
            lineStyle: {
              color: "#23D0C4",
              width: 2,
            },
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(50, 216, 205, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(255, 255, 255, 0.2)",
                },
              ],
              false
            ),
          },
        },
        data: dataSource.map((item) => item.value),
      },
    ],
  };
  return option;
};

// 数据总览
const getDataViewer = () => {
  let datas = [
    {
      name: "建成区面积",
      value: 14335,
    },
    {
      name: "水资源总量",
      value: 133.95,
    },
    {
      name: "绿地面积",
      value: 1633.34,
    },
    {
      name: "绿化率",
      value: 45,
    },
    {
      name: "生产总值",
      value: 5266.82,
    },
  ];

  let seriesData = [];
  // 球的大小
  let symbolSizeArr = [50, 55, 60, 75, 40];
  // 球的位置
  let postionArr = [
    { x: 0, y: -10 },
    { x: 50, y: 40 },
    { x: 30, y: 40 },
    { x: 55, y: 70 },
    { x: 45, y: 100 },
  ];
  // 球的颜色
  let colors = ["#27b6ff", "#00fffc", "#27b6ff", "#d1fe4a", "#27b6ff"];

  for (let i = 0; i < 5; i++) {
    let color = colors[i];
    let x = postionArr[i];
    let item = {
      name: datas[i].name,
      value: datas[i].value,
      x: postionArr[i].x,
      y: postionArr[i].y,
      label: {
        show: true,
        align: "center",
        lineHeight: 10,
        fontSize: 10,
        formatter: function (params) {
          console.log(params);
          switch (params.dataIndex) {
            case 0:
              return `{bigNum|${params.value}}万亿元 \n${params.name}`;
              break;
            case 1:
              return `{bigNum|${params.value}}亿立方米 \n${params.name}`;
              break;
            case 2:
              return `{bigNum|${params.value}}平方公里 \n${params.name}`;
              break;

            case 3:
              return `{bigNum|${params.value}}% \n${params.name}`;
              break;
            case 4:
              return `{bigNum|${params.value}}亿元 \n${params.name}`;
              break;

            default:
            // code
          }
        },
        rich: {
          bigNum: {
            fontSize: 12,
          },
        },
      },
      symbolSize: symbolSizeArr[i],
      draggable: true,
      itemStyle: {
        normal: {
          shadowBlur: 15,
          shadowColor: color,
          color: "rgba(0,0,0,0.1)",
          borderWidth: 1,
          borderColor: color,
        },
      },
    };

    seriesData.push(item);
  }

  const option = {
    tooltip: {
      formatter: function (params) {
        console.log(params);
        let str =
          params.marker +
          "" +
          params.data.name +
          "</br>" +
          "交易额：" +
          params.data.value +
          "万元</br>";
        return str;
      },
    },
    grid: {
      top: 0,
      left: 0,
      bottom: '5%',
      right: 0,
    },
    animationDurationUpdate: function (idx) {
      // 越往后的数据延迟越大
      return idx * 100;
    },
    animationEasingUpdate: "bounceIn",
    color: ["#fff", "#fff", "#fff"],

    series: [
      {
        type: "graph",
        layout: "force",
        force: {
          repulsion: 70,
          // edgeLength: 0
        },

        // roam: true, // 缩放
        // label: {
        //     show: true,
        //     formatter: function(params) {
        //         console.log('params',params);
        //     }
        // },

        data: seriesData,
      },
    ],
  };
  return option;
};

// 事件统计
const getEventOpts = () => {
  //柱状图顶部波纹图片
  const myIcon =
    "";
  //x坐标轴的图片装饰（本地图片请使用require('本地路径')）
  const barIcons = {
    one: "",
    two: "",
    three:
      "",
    four: "",
    five: "",
    six: "",
  };
  let valueList = [30, 10, 20, 42, 30, 20],
    barData = [
      { value: 30, type: "分类一" },
      { value: 10, type: "分类二" },
      { value: 20, type: "分类三" },
      { value: 42, type: "分类四" },
      { value: 30, type: "分类五" },
      { value: 20, type: "分类六" },
    ];

  let barMax = Math.max.apply(null, valueList); //获取柱状图数据中的最大值
  let maxData = []; //用于背景装饰，数据均取最大值，symbol存放波纹图
  for (let i in barData) {
    maxData.push({
      value: Math.ceil(barMax / 5) * 5,
      symbol: "image://" + myIcon + "",
    });
  }
  const option = {
    backgroundColor: "rgba(0,0,0,0)",
    grid: {
      top: "4%",
      left: "0%",
      bottom: "10%",
      right: "0%",
    },
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
    },
    animation: true,
    xAxis: [
      {
        type: "category",
        data: ["分类一", "分类二", "分类三", "分类四", "分类五", "分类六"],
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#01c5fc",
          },
        },
        axisLabel: {
          formatter: function (value, params) {
            return `{a|${value}}`;
          },
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
          rich: {
            a: {
              color: "#fff",
              fontSize: 10,
              interval: 0,
            }
          },
        },
      },
    ],
    yAxis: [
      {
        show: false,
        type: "value",
      },
    ],
    series: [
      //背景装饰柱
      {
        type: "pictorialBar",
        // silent: true,
        symbolSize: [15, 3],
        symbolOffset: [0, -3],
        symbolPosition: "end",
        z: 12,
        color: "#3eb7f6",
        data: maxData,
        tooltip: {
          show: false,
        },
      },
      {
        name: "背景圆柱",
        type: "bar",
        barWidth: "15",
        // barGap: "10%",
        // barCateGoryGap: "1%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#0f519a",
              },
              {
                offset: 0.79,
                color: "#1a78c9",
              },
              {
                offset: 0.99,
                color: "#1e63ae",
              },
              {
                offset: 1,
                color: "#1e62ac",
              },
            ]),
            opacity: 0.8,
          },
        },
        tooltip: {
          show: false,
        },
        data: maxData,
      },
      {
        name: "工单量", //内部渐变圆柱
        type: "bar",
        barWidth: 15,
        z: 12,
        barGap: "-100%",
        label: {
          normal: {
            show: true,
            position: "top",
            fontSize: 8,
            color: "#fff",
          },
        },
        itemStyle: {
          //lenged文本
          opacity: 0.7,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
            {
              offset: 0,
              color: "rgba(31,147,201,1)",
            },
            {
              offset: 0.79,
              color: "rgba(26,120,201,0.8)",
            },
            {
              offset: 1,
              color: "rgba(30,98,172,0)",
            },
          ]),
        },
        data: barData,
      },
      {
        name: "上部圆",
        type: "pictorialBar",
        silent: true,
        symbolSize: [15,3],
        symbolOffset: [0, -5],
        symbolPosition: "end",
        z: 12,
        color: "#3eb7f6",
        data: barData,
      },
      {
        name: "底部圆",
        type: "pictorialBar",
        silent: true,
        symbolSize: [15, 3],
        symbolOffset: [0, 0],
        z: 12,
        color: "#3eb7f6",
        data: barData,
      },
    ],
  };
  return option;
};

export { getCommunityOpts, getPeopleChartOpts, getDataViewer, getEventOpts };
